<template>
	<view class="bigView">
		<view style="background-color: white;">
			<u-tabs :list="list1" :current="clubType" :auto-stretch="true" :activeStyle="{
					color: '#1875FF',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					fontSize:'14px'
				}" :inactiveStyle="{
					color: '#00000080',
					transform: 'scale(1)',
					fontSize:'14px'
				}" lineColor='#1875FF' @click="click"></u-tabs>
		</view>
		<view class="topView" v-if="Object.keys(result).length>0">
			<view class="title">{{result.theme}}</view>
			<view class="subTitle">{{result.updatedAtView+' '}}由{{result.updatedByName}}发布</view>
			<!-- <div v-html="result.content" class="htmlView"></div> -->
			<u-parse class="htmlView" :content="result.content" :lazyLoad="true"></u-parse>
		</view>
		<view class="bottomView" :style="[{height:bottom + 'px'}]" v-if="!isExpired && Object.keys(result).length>0">
			<view class="sure" @click="sureHandle">我要报名</view>
		</view>
	</view>
</template>

<script>
	import { isTimeExpired } from '../../../utils/auth';
	import club from '@/api/club.js'
	export default{
		components:{
			
		},
		data(){
			return {
				clubType:0,
				bottom:0,
				indexList:[1,25,5,6],
				result:{},
				userInfo:{},
				isExpired:true,
				list1: [{
					name: '篮球俱乐部',
				}, {
					name: '足球俱乐部',
				}, {
					name: '乒乓球俱乐部'
				}, {
					name: '羽毛球俱乐部'
				}, {
					name: '徒步'
				}],
				htmlValue:'据说，有一支团队在负责规划设计火星城市的人类居所，另一支团队则在设计可以应对火星环境的太空服，同时医疗团队也在研究人类是否能在火星繁衍后代。\n马斯克又要如何做贡献？\n他将提供自己的精子，在火星上培育出一批居民，报道援引两位知情人士的消息称。'
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				// this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom;
				// this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
			}})
			
			
		},
		onLoad(options) {
			this.$nextTick(() =>{
				this.initUserInfo()
			})
			if(options.clubType){
				this.clubType = options.clubType;
			}
			this.listRequest()
		},
		methods:{
			initUserInfo(){
				const userInfo = uni.getStorageSync("userInfo")
				if(userInfo){
					this.userInfo = JSON.parse(userInfo)
				}
			},
			click(item) {
				this.clubType = item.index;
				this.listRequest()
			},
			listRequest(){
				this.result = {}
				club.listHandle({clubType: this.clubType}).then(res =>{
					this.result = res;
					this.isExpired = isTimeExpired(this.result.deadline)
				}).catch(error =>{
					
				})
			},
			scrolltolower() {
				// this.loadmore()
			},
			sureHandle(){
				// uni.navigateBack()
				uni.showLoading({
					title:'报名中，请稍等...'
				})
				club.clubRegistrationHandle({
					userId: this.userInfo.id,
					id:this.result.id,
					clubType:this.clubType,
				}).then(res =>{
					uni.hideLoading()
					uni.showToast({
						title: '操作成功'
					})
				}).catch(error =>{
					
				})
			}
		},
		onReady() {
			
		}
	}
</script>

<style lang="scss" scoped>
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #F7F7F7;
	display: flex;
	flex-direction: column;
}
.topView{
	flex-grow: 1;
	// width: 100vw;
	// background-color: green;
	display: flex;
	flex-direction: column;
	width: 100vw;
	overflow-y: auto;
	// justify-content: center;
	.title{
		font-size: 20px;
		color: #000000;
		margin-top: 24px;
		margin-left: 16px;
	}
	.subTitle{
		font-size: 12px;
		color: #7E7E7E;
		margin-top: 8px;
		margin-left: 16px;
		line-height: 1.5;
	}
}
.htmlView{
	margin-top: 10px;
	// margin-left: 12px;
	padding: 20px;
}
.u-tabs__nav {
  justify-content: center; /* 使标签居中 */
}
.u-tabs__item {
  flex: 1; /* 让每个标签项均分空间 */
}
.bottomView{
	height: 150px;
	width: 100vw;
	background-color: white;
	display: flex;
	justify-content: center;
	.sure{
		width: calc(100vw - 32px);//calc(100vw-#{32px});
		height: 48px;
		border-radius: 24px;
		background-color: #247BFD;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 6px;
		color: white;
	}
}

table, td, th {
  border-color: #ddd;
  border-width: 1px;
  border-style: solid;
}
</style>